<template>
	<view class="course-remind">
		<view class="list">
			<view class="item" @click="onPageTap('mobile')">
				<span class="title">绑定手机号</span>
				<span class="content">{{dataObj.mobile}}</span>
			</view>
			<view class="item" @click="onPageTap('psw')">
				<span class="title">修改密码</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageObj: {
					mobile: '/pages/account/bind-mobile', // 修改绑定手机号
					psw: '/pages/account/change-psw' // 修改密码
				},
				dataObj: {
					mobile: '未绑定手机号码'
				}
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			this.dataObj['mobile'] = userInfo['mobile'];
		},
		methods: {
			// 页面操作
			onPageTap(key) {
				const url = this.pageObj[key];
				if (!url) return false;
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.course-remind{
		padding: 18rpx 0 2rpx;
		.list{
			border-radius: 22px;
			background-color: #FFFFFF;
			padding: 0 0 0 36rpx;
			margin-bottom: 18rpx;
			.item{
				position: relative;
				height: 108rpx;
				line-height: 108rpx;
				border-bottom: 1rpx solid #EAEFF1;
				padding-right: 76rpx;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -16rpx;
					right: 36rpx;
					width: 32rpx;
					height: 32rpx;
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100%;
					background-image: url(../../../static/images/common/arrow-right.png);
				}
				&:nth-last-child(1){
					border-bottom: none;
				}
				.title{
					float: left;
					font-size: 30rpx;
					color: #1A1A1A;
				}
				.content{
					float: right;
					font-size: 26rpx;
					color: #7F7F7F;
				}
			}
		}
	}
</style>
